<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar title="公文发文" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id"
                        :billType="form.billType" @submitForm="submitForm"></FormTopBar>
        </el-card>

        <div style="display: flex;">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly" style="width: 65%;">
                <el-card class="top15" style="height: calc(100vh - 215px);overflow-y: scroll">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                        <span style="float: right" v-if="form.id!=undefined">单据编号：{{form.billCode}}</span>
                    </div>
                    <el-form-item label="套红模版" prop="redHeadId">
                        <el-select v-model="form.redHeadId" placeholder="请选择套红模版" clearable>
                            <el-option v-for="tpl in redHeadTplList" :key="tpl.id" :label="tpl.name" :value="tpl.id"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="form.title" placeholder="请输入标题" @input="formatHtml"/>
                    </el-form-item>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="企字" prop="qizi">
                                <el-input v-model="form.qizi" placeholder="请输入企字" @input="formatHtml"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="年份" prop="year">
                                <el-input v-model="form.year" placeholder="请输入年份" @input="formatHtml"/>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="第几号文" prop="num">
                                <el-input v-model="form.num" placeholder="请输入第几号文" @input="formatHtml"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="密级" prop="secretLevel">
                                <el-select v-model="form.secretLevel" placeholder="请选择密级" clearable>
                                    <el-option v-for="dict in dict.type.offical_doc_encryption_level" :key="dict.value" :label="dict.label" :value="dict.value"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="保密期间" prop="secretPeriod">
                                <el-select v-model="form.secretPeriod" placeholder="请选择保密期间" clearable>
                                    <el-option v-for="dict in dict.type.offical_doc_secret_period" :key="dict.value" :label="dict.label" :value="dict.value"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="紧急程度" prop="emergentLevel">
                                <el-select v-model="form.emergentLevel" placeholder="请选择紧急程度" clearable>
                                    <el-option v-for="dict in dict.type.offical_doc_emergent_level" :key="dict.value" :label="dict.label" :value="dict.value"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="公开类别" prop="publicCategory">
                                <el-select v-model="form.publicCategory" placeholder="请选择公开类别" clearable>
                                    <el-option v-for="dict in dict.type.offical_doc_public_category" :key="dict.value" :label="dict.label" :value="dict.value"/>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="发文日期" prop="sendDate">
                                <el-date-picker clearable v-model="form.sendDate" type="date" value-format="yyyy年MM月dd日" placeholder="请选择发文日期" @change="formatHtml">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8">
                            <el-form-item label="发文部门" prop="docDeptName">
                                <el-input v-model="form.docDeptName" placeholder="请输入发文部门" @input="formatHtml"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :sm="16" :md="16" :lg="16">
                            <el-form-item label="收文部门" prop="receiveDeptIdArr">
                                <treeselect v-model="form.receiveDeptIdArr" :options="deptOptions" :show-count="true" :multiple="true" placeholder="请选择收文部门"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="公文内容">
                        <editor v-model="form.content" :min-height="500" @change="formatHtml"/>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容"/>
                    </el-form-item>
                </el-card>
            </el-form>

            <div style="width: 35%;margin-top: 15px; margin-left: 15px;">
                <el-card style="height: calc(100vh - 215px);overflow-y: scroll">
                    <div slot="header" class="clearfix">
                        <span>公文预览</span>
                    </div>
                    <div v-html="form.sealHtml"></div>
                </el-card>
            </div>
        </div>

    </div>
</template>
<script>
import FlowInfo from "@/views/workflow/flow/flowInfo";
import {listOfficalDoc, getOfficalDoc, delOfficalDoc, addOfficalDoc, updateOfficalDoc} from "@/api/oa/officalDoc";
import { listOfficeDocRedheadtplAll } from "@/api/oa/officeDocRedheadtpl";
import FormTopBar from "@/views/workflow/common/formTopBar"
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {parseStrEmpty} from "@/api/util/util";
export default {
    name: "OfficalDocForm",
    components: {FlowInfo, FormTopBar,Treeselect},
    dicts: ['offical_doc_encryption_level','offical_doc_secret_period','offical_doc_public_category','offical_doc_emergent_level'],
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            showFlowInfo:false,
            taskId:'',
            readonly:false,
            redHeadTplList:[],
            form:{
            },
            // 部门树选项
            deptOptions: [],
            // 表单校验
            rules: {
                redHeadId: [
                    {required: true, message: "套红id不能为空", trigger: "blur"}
                ],
                title: [
                    {required: true, message: "标题不能为空", trigger: "blur"}
                ],
                content: [
                    {required: true, message: "公文内容不能为空", trigger: "blur"}
                ],
                year: [
                    {required: true, message: "年份不能为空", trigger: "blur"}
                ],
                num: [
                    {required: true, message: "第几号文不能为空", trigger: "blur"}
                ],
                qizi: [
                    {required: true, message: "企字不能为空", trigger: "blur"}
                ],
                sendDate: [
                    {required: true, message: "发文日期不能为空", trigger: "blur"}
                ],
                receiveDeptIdArr: [
                    {required: true, message: "收文部门不能为空", trigger: "blur"}
                ]
            }
        }
    },
    provide(){
        return {
            addCcedList:this.addCcedList
        }
    },
    created() {
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        const billType = this.$route.params && this.$route.params.billType;
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        if(billType){
            this.form.billType = billType;
        }
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);
        }

        this.getTreeselect();
        this.getRedHeadTplList()
    },
    methods: {
        //查询套红模版
        getRedHeadTplList(){
            let query = {
                status:"0"
            }
            listOfficeDocRedheadtplAll(query).then(res=>{
                if(res.code==200){
                    this.redHeadTplList = res.data;
                }
            })
        },
        //  获取单据信息
        getDetailData(id) {
            getOfficalDoc(id).then(response => {
                this.form = response.data;
                if(this.form.receiveDeptId){
                    this.form.receiveDeptIdArr = this.form.receiveDeptId.split(",");
                }
                this.formatHtml(this.form.content);
            });
        },
        /** 提交按钮 */
        submitForm() {
            if(this.form.receiveDeptIdArr && this.form.receiveDeptIdArr.length>0){
                this.form.receiveDeptId = this.form.receiveDeptIdArr.join(",")
            }
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateOfficalDoc(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addOfficalDoc(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        formatHtml(){
            console.log(this.form.content)
            let html = "<html>\n" +
                "\t<body>\n" +
                "\t\t<div style='padding:40px;'>\n" +
                "\t\t\t<div style='text-align: center;padding-top:20px'>\n" +
                "\t\t\t\t<span style='color:#FF0000; font-size: 40px;'>\n" +
                "\t\t\t\t\t<strong>"+this.util.parseStrEmpty(this.form.redTitle)+"</strong>\n" +
                "\t\t\t\t</span>\n" +
                "\t\t\t</div>\n" +
                "\t\t\t<div style='text-align: center;padding:25px 25px 3px 25px'>\n" +
                "\t\t\t\t<span style='color: #222222; font-size: 16px;'>"+this.util.parseStrEmpty(this.form.qizi)+"（"+this.util.parseStrEmpty(this.form.year)+"）第【"+this.util.parseStrEmpty(this.form.num)+"】号</span>\n" +
                "\t\t\t</div>\n" +
                "\t\t\t<table style='border-bottom:2px solid #FF0000;width:100%;'>\n" +
                "\t\t\t\t<tr style='width:100%'>\n" +
                "\t\t\t\t\t<td style='100%'>&nbsp;</td>\n" +
                "\t\t\t\t</tr>\n" +
                "\t\t\t</table>\n" +
                "\t\t\t<div style='text-align: center;padding: 25px 25px 0px 25px;'>\n" +
                "\t\t\t\t<span style='color: #222222; font-size: 18px;font-weight:900;'>"+this.util.parseStrEmpty(this.form.title)+"</span>\n" +
                "\t\t\t</div>\n" +
                "\t\t\t<br />\n" +
                this.util.parseStrEmpty(this.form.content) +
                "\t\t\t<div style='position: relative;padding-top:50px;'>\n" +
                "\t\t\t\t<div style='text-align: right;font-size:20px;padding-right:50px;line-height:36px;'>"+this.util.parseStrEmpty(this.form.companyName)+"</div>\n" +
                "\t\t\t\t<div style='text-align: right;font-size:20px;padding-right:50px;line-height:36px;'>"+this.util.parseStrEmpty(this.form.sendDate)+"</div>\n" +
                "\t\t\t\t<div id='seal'></div>\n" +
                "\t\t\t</div>\n" +
                "\t\t</div>\n" +
                "\t</body>\n" +
                "</html>";

            if(this.form.draftStatus==='1'){
                html = html.replace("<div id='seal'></div>","<img src='"+this.baseUrl+this.form.img+"' style='width: 150px;height: 150px;position: absolute;right: 90px;top: 10px;'></div>");
            }
            this.form.sealHtml = html;
        },
        closeThisPage(){
            this.$tab.closeOpenPage({ path: "/officeDoc/officalDoc",query: {billType:this.form.billType}});
        },
        /** 查询部门下拉树结构 */
        getTreeselect() {
            treeselect().then(response => {
                this.deptOptions = response.data;
            });
        },
        // 创建单据时候，选择了抄送人
        addCcedList(ccedList){
            this.form.ccedList = ccedList;
            console.log("回填抄送人")
            console.log(this.form)
        }
    }

}
</script>
